<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>TODOLIST</title>
        
        <script src='./vue.js'></script>
        
    </head>
    <body>
        <div id="app">
        <input type="text" v-model="inputValue"/>
        <button v-on:click="addTodoList">提交</button>
        <ul>
             <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
        
        </div>
        <script >

            //Vue 提供新建全局组件的方法，接收一个组件名称和组件属性类
           // Vue.component("TodoItem",{

                //接收父类通过 v-bind 传过来的参数
               // props:['content'],
                //template:"<li>{{content}}</li>"
            //})



             //局部组件
             var TodoItem={
                 props:['content'],
                 template:"<li>{{content}}</li>"
             }



            var app= new Vue({
                el: '#app',
                data:{
                    list:[],

                    //双向绑定，档改变输入框内容时 inputValue  会改变，当改变 inputValue的值时输入框的内容也会改变
                    inputValue:''
                },
                methods:{
                    addTodoList:function(){
                        this.list.push(this.inputValue);
                        this.inputValue=''
                    
                    }
                },

                //申明组件
                components:{
                    TodoItem:TodoItem
                }

            
            })
        </script>
    </body>
</html>
